<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs>
		<!-- 搜索 -->
		<view v-if="search_state == true" class="content_search_waikuang">
			<view class="content_search">
				<image class="search_image" src="../../static/my/icon/search.png"></image>
				<input v-model="search_nickname" @blur="onSubmite_input()" placeholder="搜索商品/收货人/收货人手机号"/>
			</view>
		</view>
		<view v-else class="content_search_waikuang" style="position: inherit;">
			<view class="content_search">
				<image class="search_image" src="../../static/my/icon/search.png"></image>
				<input v-model="search_nickname" @blur="onSubmite()" placeholder="搜索商品/收货人/收货人手机号"/>
			</view>
		</view>
		<!-- 搜索 -->
		<view :class="{'tui-order-list':scrollTop>=0}">
			<!-- 接龙案例 -->
			<view class="tuiTips" v-if="empty == 0 && rareData.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<view class="case" v-for="(item,index) in rareData" :key="index">
				<view class="case_box">
					<tui-card :image="imageurl(item.imageurl)" :title="nickname(item.nickname)" :tag="status(item.status_name)" :time="formatDate(item.create_time)" >
						<template v-slot:body>
							<view class="case_box_title"  @click="details('./playOrder?order_id='+item.order_id+'&tab='+currentTab)">
								{{item['title']}}
							</view>
							<block v-for="(val,key) in item['goods_info']" :key="key"  >
								<tui-list-cell padding="0" @click="details('./playOrder?order_id='+item.order_id+'&tab='+currentTab)">
									<view class="tui-goods-item">
										<view class="tui-goods-center">
											<view class="tui-goods-name">{{val.goods_name}}【{{val.goods_attr}}】 + {{val.goods_number}}</view>
										</view>
									</view>
								</tui-list-cell>
							</block>
							
							<view v-if="item.amount == item.real_amount" class="case_box_des"  @click="details('./playOrder?order_id='+item.order_id+'&tab='+currentTab)">
								合计：<text class="red">￥{{price(item.amount)}}</text>
							</view>
							<view v-else class="case_box_des"  @click="details('./playOrder?order_id='+item.order_id+'&tab='+currentTab)">
								合计：<text class="red">￥{{price(item.real_amount)}}</text>
							</view>
							
						</template>
						<template v-slot:footer>
							<view class="tui-order-btn"  v-if="item.status == 1 &&  item.pay_status == 3 && item.pay_open == 1">
								<view class="tui-btn-ml" @click="goToPay(item)">
									<tui-button  :plain="true" width="148rpx" height="56rpx" :size="26" >去支付</tui-button>
								</view>
							</view>
						</template>
					</tui-card>
				
				</view>
			</view>
			<!-- 接龙案例 -->
		</view>
	
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"  v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		
	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiSticky from "@/components/sticky/sticky"
	import tuiCard from "@/components/card/card"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"

	export default {
		components: {
			tuiTabs,
			tuiButton,
			tuiLoadmore,
			tuiNomore,
			tuiListCell,
			tuiSticky,
			tuiIcon,
			tuiCard,
			tuiTag,
			tuiToast,
			tuiTips
		},
		data() {
			return {
				userInfo: '',
				tabs: [
				{
					name: "全部"
				}, 
				{
					name: "待付款"
				},
				{
					name: "已付款"
				},
				{
					name: "已退款"
				},
				],
				tabStatus: '',
				empty: 1,
				statusList: [],
				currentTab: 0,
				// pageIndex: 1,
				page: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				rareData: [],
				payStatusList:[],
				pay_status: '',
				refund_status: '',
				search_state: false,
				search_nickname: '',
			}
		},
		onLoad: function(option){
			if(option.tab ){
				this.currentTab = option.tab
				this.setTab(option.tab)
			}
			// this.config = uni.getStorageSync('publicConif');
			wx.hideShareMenu();
		},
		onShow: function() {
			// this.loadData();
			this.userInfo = uni.getStorageSync('userInfo')
			if(this.userInfo){
				this.loadData();		
			}else{
				this.empty = 0
				this.loadding = false
				this.pullUpOn = false
			}
		}, 
		methods: {
			// input 输入结束事件
			onSubmite_input: function(){
				this.rareData = [];
				this.page = 1;
				this.loadData();
			},
			onSubmite: function(){
				this.rareData = [];
				this.page = 1;
				this.loadData();
			},
			goToPay: function(goods){
				let that = this;
				that.tui.request('order/pay',{order_id:goods.order_id}).then((res) => {
					if(res.code == '0000'){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.payInfo.timeStamp,
							nonceStr: res.payInfo.nonceStr,
							package: res.payInfo.package,
							signType: res.payInfo.signType,
							paySign: res.payInfo.paySign,
							success: function (res) {
								if(res.code == 1){
									let params = {
										title: '支付成功',
										imgUrl: "/static/toast/check-circle.png",
										icon: true
									};
									that.$refs.toast.show(params);
									that.loadData();
								}else{
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/my/order'
										});
									}, 2000);
								}
							},
							fail: function (err) {
								let params = {
									title: '支付失败',
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								that.$refs.toast.show(params);
							}
						});
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			price: function(amount){
				return this.tui.centsToYuan(amount);
			},
			status: function(item){
				// let color = '#f7374f';
				// if(status == 1){
				// 	color = '#0A8FE2';
				// } 
				return {text: item.title ,color: item.color, size:'28'};
				
				// return {text: this.payStatusList[status]['title'] ,color: color, size:'28'};
			},
			formatDate: function (timestamp) {
				return {text: dataTime.formatDate('m-d',timestamp)}
			},
			nickname: function(nickname){
				return {text: nickname};
			},
			imageurl: function(image){
				return {url: image};
			},
			loadData: function(){
				let pagesize = 5
				if(!this.userInfo){
					return false
				}
				this.loadding = true
				// pay_open    status
				this.tui.request('order/userList',{pay_open: 1,page_size: pagesize,page:this.page,pay_status: this.pay_status,status:this.tabStatus,refund_status: this.refund_status,keyword:this.search_nickname}).then((res) => {
					this.statusList = res.statusList
					if(res.data.list.length > 0){
						this.loadding = false;
						this.pullUpOn = true;
						this.empty = 1;
						this.page++;
						this.payStatusList = res.payStatusList;
						for( let i = 0; i < res.data.list.length; i++ ){
							res.data.list[i]['goods_info'] = JSON.parse(res.data.list[i]['goods_info']);
							this.rareData.push(res.data.list[i])
						}
						// this.rareData = res.data.list
					}else{
						this.loadding = false
						this.pullUpOn = false
					}
					if(res.data.list.length == 0 &&  this.page == 1){
						this.empty = 0
					
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			change: function(e) {
				this.currentTab = e.index
				if(!this.userInfo){
					return false
				}
				this.page = 1
				this.loadding = false
				this.pullUpOn = true
				this.rareData = []
				this.setTab(e.index)
				this.loadData();
			},
			setTab: function(index){
				if(index == 0){
					this.pay_status =  '';
					this.tabStatus = '';
					this.refund_status = '';
				}else if(index == 1){
					this.pay_status =  3;
					this.tabStatus = 1;
					this.refund_status = '';
				}else if(index == 2){
					this.pay_status =  1;
					this.tabStatus = 1;
					this.refund_status = '';
				} else if(index == 3){
					this.pay_status =  1;
					this.tabStatus = 1;
					this.refund_status = 1;
				}
			},
			details: function(url,type){
				if(!url){
					return false;
				}
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				uni.navigateTo({
				   url: url,
				});
			},
			//授权登录
			wxGetUserInfo: function() {
				let that = this;
				that.tui.wxLogin().then((res)=>{
					if(res.code == '0000'){
						that.userInfo = res
						this.rareData = []
						this.loadData();
					}
				});
			},
		},
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom: function() {
			console.log('这是分布')
			if(this.pullUpOn == true){
				this.loadData();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
			if(e.scrollTop > 100){
				this.search_state = true;
			}else{
				this.search_state = false;
			}
		},

	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	/* tab */
	.tui-tabs-active{
		color: #0C83CC !important;
		font-weight: 400;
	}
	.tui-tabs-slide{
		background: #0C83CC !important;
	}
	.tui-order-list {
		/* margin-top: 80rpx; */
		/* padding-bottom: 100rpx; */
	}
	.colorLan{
		color: #0a8fe2 !important;
		font-size: 35rpx !important;
		font-weight: 500 !important;
	}
	.tui-tabs-item{
		width: 50% !important;
	}
	/* tab */


	/* 接龙案例 */
	.case{
		/* background: #FFFFFF; */
		padding: 0 20rpx 0 20rpx;
	}
	.case_title{
		font-size: 35rpx;
		font-weight: 700;
		padding-top: 20rpx;
	}
	.case_describe{
		font-size: 28rpx;
		color: #a6a6a6;
		padding-top: 10rpx;
		line-height: 60rpx;
	}
	.case_box{
		/* padding: 0px 0px 40px 0px; */
	}
	.tui-header-right{
	/* 	margin-top: -40rpx !important;
		margin-right: -10px !important; */
		/* color: #FFFFFF !important; */
		/* background: #CCCCCC !important; */
		/* padding: 5rpx 10rpx ; */
	}
	.tui-header-title{
		font-size: 30rpx !important;
		font-weight: 500;
		margin-top: 10rpx !important;
		color: #000000 !important;
	}
	.tui-title {
		width: 100%;
		padding: 70upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		line-height: 30upx;
		color: #666;
	}
	.tui-card{
		margin: 0rpx !important;
		margin-top: 20rpx !important;
		box-shadow: 0 0 3rpx #eee !important;
		border: 1rpx solid #f5f5f5 !important;
	}
	.tui-header-thumb{
		border-radius: 50% !important;
		width: 90rpx !important;
		height: 90rpx !important;
	}
	.text-green{
		color: #000000 !important;
	}
	.text-red ,.text-grey,.text-blue,.text-orange{
		color: #999999 !important;
	}
	/* 接龙案例 */
	
	/* tuiTips */
	.tuiTips{
		margin-top: 30% ;
	}
	.tui-tips-content{
		font-size: 30rpx !important; 
		color: #cccccc !important;
	}
	/* tuiTips */

	.tui-tabs-title{
		font-size: 30rpx !important;
		font-weight: 400 !important;
	}

	.tui-goods-item {
		width: 100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.tui-goods-center {
		flex: 1;
		padding: 10rpx 8rpx;
		box-sizing: border-box;
	}
	.tui-goods-name {
		/* max-width: 410rpx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		line-height: 32rpx;
		color: #999999;
		line-height: 45rpx;
	}
	.tui-list-cell::after{
		border-bottom: none !important;
	}
	.case_box_des{
		margin: 25rpx auto;
		/* margin-bottom: 50rpx; */
		font-size: 30rpx;
		padding: 10rpx 30rpx;
		font-weight: 450;
		width: 100%;
	}
	.red{
		color: red !important;
	}
	.tui-nomore-text{
		background: #f5f6f8 !important;
	}
	.tui-order-btn {
		width: 95%;
		margin: 10px auto;
		border-top: 1px solid #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 0rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-btn-ml {
		margin-top: 35rpx;
	}
	.tui-primary-outline::after {
		border: 2rpx solid #209ae5 !important;
		border-radius: 20rpx !important;
	}
	.case_box_title{
		font-size: 30rpx;
		padding: 25rpx 30rpx;
		font-weight: 450;
		line-height: 40rpx;
	}
	
	/* 搜索 */
	.content_search_waikuang{
		position: fixed;
		// top: 178rpx;
		z-index: 999;
		height: 120rpx;
		width: 100%;
		background-color: #FFF;
		margin-top: 80rpx;
	}
	
	.content_search{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 90%;
		background-color: #F3F3F3;
		margin: 0 auto;
		border-radius: 5rpx;
		margin-top: 20rpx;
	}
	
	.content_search input{
		height: 80rpx;
		line-height: 80rpx;
		width: 80%;
		text-align: left;
		padding-left: 10rpx;
		background: #F3F3F3;
		/* margin-top: 10rpx;
		margin: 0 auto; */
	}
	
	.search_image{
		width: 20px;
		height: 40rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	/* 搜索 */
</style>
